<script lang="ts" setup name="flowableRepository">
import type { flowable } from '@/index.d';
import { getProcessDefinitionVOListByConditionsWithPage, urls } from '@/index';
import { useRequest } from 'vue-request';

const title = '流程定义';

const queryCondition = reactive<flowable.ProcessDefinitionQueryCondition>({
  currentPage: 1,
  pageSize: 20,
  processDefinitionIsLatestVersion: true,
  deleted: false,
  change: false
});

const resetQueryCondition = () => {
  queryCondition.currentPage = 1;
  queryCondition.pageSize = 20;
  delete queryCondition.processDefinitionCategory;
  delete queryCondition.processDefinitionName;
  delete queryCondition.deploymentTenantId;
  delete queryCondition.processDefinitionKey;
};

const getProcessDefinitionListWithPagePromise = () => {
  return getProcessDefinitionVOListByConditionsWithPage(queryCondition);
};

const {
  data: processDefinitionListWithPage,
  loading,
  run: getProcessDefinitionListWithPage
} = useRequest(getProcessDefinitionListWithPagePromise);

const handleResetQuery = () => {
  resetQueryCondition();
  getProcessDefinitionListWithPage();
};

const emit = defineEmits<{
  (e: 'openCreateProcessInstanceDialog', deploymentDTO: flowable.ProcessDefinitionVO): void;
}>();

const openCreateProcessInstanceDialog = (row: flowable.ProcessDefinitionVO) => {
  emit('openCreateProcessInstanceDialog', row);
};
</script>
<template>
  <HqContainerTableFlowable
    :title
    :base-url="urls.processDefinition"
    :loading="loading"
    :operation-buttons="['search', 'resetSearch']"
    @handle-query="getProcessDefinitionListWithPage"
    @handle-reset-query="handleResetQuery"
  >
    <template #search>
      <hq-col kind="search">
        <el-select
          placeholder="请选择流程定义种类"
          v-model="queryCondition.processDefinitionCategory"
          clearable
          filterable
          @change="getProcessDefinitionListWithPage"
        >
          <HqDeploymentCategoryOptions />
        </el-select>
      </hq-col>
      <hq-col kind="search">
        <el-input
          v-model="queryCondition.processDefinitionName"
          placeholder="请输入流程定义name"
          clearable
          @clear="getProcessDefinitionListWithPage"
        />
      </hq-col>
      <hq-col kind="search">
        <el-input
          v-model="queryCondition.processDefinitionKey"
          placeholder="请输入流程定义key"
          clearable
          @clear="getProcessDefinitionListWithPage"
        />
      </hq-col>
    </template>
    <template #table="{ height }">
      <hq-table-flowable
        :table-data="processDefinitionListWithPage?.records"
        :base-url="urls.processDefinition"
        :height
        :title
      >
        <template #columns>
          <hq-table-column prop="deploymentCategory" label="deploymentCategory" />
          <hq-table-column prop="processDefinitionName" label="processDefinitionName" />
          <hq-table-column prop="processDefinitionKey" label="processDefinitionKey" />
          <hq-table-column>
            <template #default="{ row }">
              <el-button type="success" link @click="openCreateProcessInstanceDialog(row)">
                选择流程
              </el-button>
            </template>
          </hq-table-column>
        </template>
      </hq-table-flowable>
    </template>
  </HqContainerTableFlowable>
</template>
<style lang="scss" scoped></style>
